import "../../index.css";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";
import { getLoginApi } from "../../api/user";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { upUsername } from "../../Store/ticket/ticket";
function Index() {
  type FieldType = {
    account?: string;
    password?: string;
    remember?: string;
  };
  const dispatch = useDispatch();
  const nav = useNavigate();
  const onFinish: FormProps<FieldType>["onFinish"] = async (values) => {
    console.log("Success:", values);
    const res = await getLoginApi(values);
    console.log(res);
    localStorage.setItem("token", res.token);
    nav("/");
    dispatch(upUsername(res.username))
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="box">
      <div className="boxx">
        <div>
          <p className="ppp">react-ant-admin</p>
          <p>欢迎使用，请先登录</p>
        </div>

        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 700 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label=""
            name="account"
            rules={[{ required: true, message: "请输入账号" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label=""
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            label={null}
          >
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button>重置</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Index;
